<script setup lang="ts">
import router from "@/router";
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import { getquestion } from "@/api/student/he/frontMain";

const startPaper = ref(true);
const last = ref(false);
const id = ref(-1);
const route = useRoute();

const querstion: any = reactive([]);
console.log(querstion.length);

onMounted(() => {
  getquestion(route.query.id).then((res) => {
    if (res.data.data.length > 0) {
      console.log(res);

      querstion.push(res.data.data);
    }
  });
});
const radio = ref();
const back = () => {
  if (id.value > 1) {
    id.value--;
  } else {
    id.value = -1;
    last.value = false;
  }
};
const start = () => {
  startPaper.value = false;
  if (id.value >= -1) {
    id.value++;
    if (id.value == 1) {
      last.value = true;
    }

    if (id.value == querstion[0].length) {
      router.push("/myexam");
    }
  }
};
</script>
<template>
  <div class="result">
    <div class="resultOrder">
      <template v-if="querstion.length == 0">
        <el-empty description="暂无数据" />
      </template>
      <template else>
        <template v-if="startPaper">
          <div>
            {{ querstion.length }}
            <p>请考生再开始答题前阅读本“考前须知”:.......</p>
            <el-button type="primary" size="large" @click="start"
              >进入答题</el-button
            >
          </div>
        </template>
        <template v-if="!startPaper">
          <div>
            <p>{{ id + 1 }}/{{ querstion[0].length }}|单选题</p>
            <div>
              <p>{{ querstion[0][id].title }}（）</p>
              <div class="question">
                <el-radio-group v-model="radio">
                  <div>
                    <el-radio :label="0">A:</el-radio
                    >{{ querstion[0][id].optionA }}
                  </div>
                  <div>
                    <el-radio :label="1">B:</el-radio
                    >{{ querstion[0][id].optionB }}
                  </div>
                  <div>
                    <el-radio :label="2">C:</el-radio
                    >{{ querstion[0][id].optionC }}
                  </div>
                  <div>
                    <el-radio :label="3">D:</el-radio
                    >{{ querstion[0][id].optionD }}
                  </div>
                </el-radio-group>
              </div>

              <el-button type="primary" @click="back" v-if="last"
                >上一题</el-button
              ><el-button type="primary" @click="start">下一题</el-button>
            </div>
          </div>
        </template>
      </template>
    </div>
  </div>
</template>
<style>
.result {
  background-color: #f4f4f4;
  width: 100%;
  height: 100vh;
}
.resultOrder {
  width: 60%;
  background-color: white;
  height: 500px;
  margin: auto;
}
.resultOrder > div:first-child {
  width: 60%;
  margin: auto;
  /* text-align: center; */
}

.question {
  flex-direction: column;
  display: flex;
  justify-content: space-around;
  margin: 20px 0px 50px 0px;
}
</style>
